<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 字符编码 -->
    <meta charset="UTF-8">
    <!-- 设置窗口宽度与缩放 -->
    <meta name="viewport" content="width= device-width, initial-scale= 1.0">
    <!-- 站点名称 -->
    <title> 主页 - Mio 小站 </title>

    <!-- css 链接 -->
    <link rel="stylesheet" id="style-css" href="../css/home/home.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="../css/home/z-index.css" type="text/css" media="all">

    <!-- 组件 -->
    <link rel="stylesheet" id="style-css" href="../css/home/component/background.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="../css/home/component/rBox.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="../css/home/component/lBox.css" type="text/css" media="all">
    <link rel="stylesheet" id="style-css" href="../css/home/component/foot.css" type="text/css" media="all">

    <!-- 响应 -->
    <link rel="stylesheet" id="style-css" href="../css/home/control.css" type="text/css" media="all">

    <!-- 字体 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- 站点 logo -->
    <link rel="icon" type="image/ico" href="../img/home/logo.jpg">
</head>

<body>
    <!-- 最外层 -->
    <div class="mainBox">
        <!-- 背景 -->
        <section class="background"> </section>

        <!-- 右侧 -->
        <section class="right">
            <!-- 右侧 第 1 页-->
            <div class="rBox">
                <!-- 内容 -->
                <div class="txt">
                    <!-- 头像 -->
                    <div class="photo">
                        <img src="../img/home/photo.jpg" alt="photo">
                    </div>
                    <!-- 姓名与介绍 -->
                    <div class="name">
                        <h1> Mio </h1>
                        <p class="introduce">- 某学编程的动漫宅 -</p>
                    </div>
                    <!-- 导航栏 -->
                    <div class="guideWin">
                    <div class="guide">
                        <nav>
                            <ul>
                                <!-- 滑动块 -->
                                <div class="slider"></div>
                                <!-- 左 页面 -->
                                <li><a href="#lBox_0"> 首页 </a></li>
                                <li><a href="#lBox_1"> 简介 </a></li>
                                <li><a href="#lBox_2"> 留言 </a></li>
                            </ul>
                        </nav>
                    </div>
                    </div>
                    <!-- 嵌入式播放器 -->
                    <div class="playerWin">
                    <div class="player">
                        <iframe src="http://music.163.com/outchain/player?type=0&id=4921304463&auto=1&height=60">
                            嵌入式播放器
                        </iframe>
                    </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 左侧 -->
        <section class="left">
            <!-- 左侧 页面列表 -->
            <div class="lBoxList">
                <!-- 第一页 -->
                <div class="lBox" id="lBox_0">
                    <!-- 占位用 -->
                </div>
                <!-- 第二页 -->
                <div class="lBox" id="lBox_1">
                    <!-- 内容 -->
                    <div class="txt">
                        <!-- 上部标题 -->
                        <header class="head">
                            <img src="../img/home/up1.jpg" alt="head">
                            <div class="title">
                                <h1> 简介 </h1>
                                <h4> &#xf017; 2023-10-24 21:31 &nbsp; | &nbsp; &#xf041; 东海岸 </h2>
                            </div>
                        </header>
                        <!-- 下部内容 -->
                        <div class="content">
                            <div class="paragraphHead">
                                <h2> 基本信息 </h2>
                            </div>
                            <div class="paragraphList">
                                <ul>
                                    <li><h3> &#xf015; 家乡: &nbsp; 广东 </h3></li>
                                    <li><h3> &#xf02d; 专业: &nbsp; 计算机科学与技术 </h3></li>
                                    <li><h3> &#xf004; 爱好: &nbsp; 动漫 &nbsp; | &nbsp; 游戏 &nbsp; | &nbsp; 编程 </h3></li>
                                    <li><h3> &#xf110; 目标: &nbsp; 制作个人博客 </h3></li>
                                </ul>
                            </div>
                            <div class="paragraphHead">
                                <h2> 联系方式 </h2>
                            </div>
                            <div class="paragraphTable">
                                <table>
                                    <tr>
                                        <td><a href="https://www.bilibili.com/video/BV1hq4y1s7VH/?spm_id_from=333.337.search-card.all.click" target="_blank"><h3>&#xf03d; &nbsp; BiliBili</h3></a></td>
                                        <td><a href="https://www.bilibili.com/video/BV1hq4y1s7VH/?spm_id_from=333.337.search-card.all.click" target="_blank"><h3>&#xf09b; &nbsp; GitHub</h3></a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="https://www.bilibili.com/video/BV1hq4y1s7VH/?spm_id_from=333.337.search-card.all.click" target="_blank"><h3>&#xf0e0; &nbsp; 邮件</h3></a></td>
                                        <td><a href="https://www.bilibili.com/video/BV1hq4y1s7VH/?spm_id_from=333.337.search-card.all.click" target="_blank"><h3>&#xf234; &nbsp; 微信</h3></a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第三页 -->
                <div class="lBox" id="lBox_2">
                    <!-- 内容 -->
                    <div class="txt">
                        <!-- 上部标题 -->
                        <header class="head">
                            <img src="../img/home/up2.jpg" alt="head">
                            <div class="title">
                                <h1> 留言 </h1>
                                <h4> &#xf017; 2023-10-25 10:48 &nbsp; | &nbsp; &#xf041; 东海岸 </h2>
                            </div>
                        </header>
                        <!-- 下部内容 -->
                        <div class="content">
                            <div class="paragraphHead">
                                <h2> 彩蛋视频 </h2>
                            </div>
                            <div class="paragraphVideo">
                                <video controls preload="auto" src="https://vdse.bdstatic.com//192d9a98d782d9c74c96f09db9378d93.mp4?authorization=bce-auth-v1%2F40f207e648424f47b2e3dfbb1014b1a5%2F2021-07-12T02%3A14%3A24Z%2F-1%2Fhost%2F530146520a1c89fb727fbbdb8a0e0c98ec69955459aed4b1c8e00839187536c9">
                                    这是视频
                                </video>
                            </div>
                            <div class="paragraphHead">
                                <h2> 留言版块 </h2>
                            </div>
                            <!-- 留言块 -->
                            <div class="commentList" id="commentList"></div>

                            <div class="paragraphHead">
                                <h2> 留下语句 </h2>
                            </div>
                            <!-- 表单 -->
                            <div class="paragraphForm">
                                <form id="comForm" action="#">
                                    <!-- 主评论区 -->
                                    <div class="paragraphTextarea">
                                        <textarea id="commentCon" placeholder="评论内容"></textarea>
                                    </div>
                                    <!-- 评论者信息 -->
                                    <div class="paragraphInputBox">
                                        <!-- 昵称 -->
                                        <div class="paragraphInput" id="inputName">
                                            <span><i> &#xf007; </i></span>
                                            <input type="text" placeholder="昵称">
                                        </div>
                                        <!-- 邮件 -->
                                        <div class="paragraphInput" id="inputEmail">
                                            <span><i> &#xf0e0; </i></span>
                                            <input type="text" placeholder="邮箱">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- 按钮 -->
                            <div class="paragraphButton">
                                <button type="button" form="comForm" onclick="submitComment()"> &#xf1d8; &nbsp; 发送 </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 音效 -->
        <div class="audioList">
            <audio class="push" src="../music/button.mp3"></audio>
        </div>

        <!-- 脚注 -->
        <footer class="foot">
            <div class="txt">
                <p>
                    <!-- 备案信息 -->
                    <span> <a href="https://www.bilibili.com/video/BV1hq4y1s7VH/?spm_id_from=333.337.search-card.all.click" target="_blank"> 备案号 </a></span>
                    <!-- 作者信息 -->
                    <span> <a href="https://www.bilibili.com/video/BV1hq4y1s7VH/?spm_id_from=333.337.search-card.all.click" target="_blank"> ©2023 Copyright Mio. </a></span>
                </p>
            </div>
        </footer>
    </div>
</body>

<!-- js 链接 -->
<script src="../js/home/comment.js"></script>
<script src="../js/home/guide.js"></script>
<script src="../js/home/active.js"></script>

</html>